<!DOCTYPE html>
<html lang="zxx">
<head>
<title>宠物之家</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<link href="css/bootstrap.css" type="text/css" rel="stylesheet" media="all">
<link href="css/style.css" type="text/css" rel="stylesheet" media="all"> 
<link href="css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="all" property="" /> 
<link rel="stylesheet" href="css/lightbox.css">
<script src="js/jquery-2.2.3.min.js"></script> 
<link href="http://fonts.googleapis.com/css?family=Righteous" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=Scada:400,400i,700,700i" rel="stylesheet">
<link href="http://fonts.googleapis.com/css?family=PT+Sans:400,400i,700,700i" rel="stylesheet">
</head>
<body>
	<div class="banner">
		<div class="header">
			<div class="container">
				<div class="menu">
					<a href="#" class="navicon"></a> 
					<div class="toggle">
						<ul class="toggle-menu">
							<li><a href="index.html" class="active"> 主页</a></li>
							<li><a href="#about" class="scroll"> 关于本网站</a></li>
							<li><a href="#gallery" class="scroll"> 萌宠图片</a></li>
							<li><a href="#services" class="scroll">宠物服务</a></li>
							<li><a href="#contact" class="scroll"> 联系</a></li>
						</ul>
					</div> 
				</div> 
				<div class="logo">
					<h3><a href="index.html">宠物之家</a></h3>
				</div> 
				<div class="clearfix"> </div>
			</div>
		</div>
		<div class="banner-text"> 
			<div class="container">
				<div class="flexslider">
					<ul class="slides">
						<li>
							<div class="banner-w3lstext">
								<h3>关爱</h3>
								<p>请给于您的宠物足够的关爱</p>
							</div>
						</li>
						<li>
							<div class="banner-w3lstext">
								<h3>责任</h3>
								<p>一旦领养请不要轻易抛弃</p>
							</div>
						</li>
						<li>
							<div class="banner-w3lstext">
								<h3>愿望</h3>
								<p>希望您与宠物一起读过美好时光~</p>
							</div>
						</li>
					</ul> 
				</div> 	
					<script defer src="js/jquery.flexslider.js"></script>
					<script type="text/javascript">
					$(window).load(function(){
					  $('.flexslider').flexslider({
						animation: "slide",
						start: function(slider){
						  $('body').removeClass('loading');
						}
					  });
					});
				  </script>
			</div>
		</div>
	</div>
	<script>
		$('.navicon').on('click', function (e) {
		  e.preventDefault();
		  $(this).toggleClass('navicon--active');
		  $('.toggle').toggleClass('toggle--active');
		});
	</script>
	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-36251023-1']);
		_gaq.push(['_setDomainName', 'jqueryscript.net']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})(); 
	</script> 
	<div class="w3ls-about w3ls-section" id="about">
		<div class="container">
			<h3 class="agileits-title">关于本网站</h3>
			<div class="w3-agileits-about-grids">
				<div class="col-md-6 agile-about-left">
					<h2 class="agileits-title">给予您对于宠物的帮助和建议，同时也可以欣赏众多宠物带给你的快乐</h2>
				</div>
				<div class="col-md-6 agile-about-right"></div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
	<div class=" w3_agileits-adopt">
		<div class="col-md-3 w3_agileits-adopt-left">
			<img src="images/p1.png" class="img-responsive" alt=""/>
		</div>
		<div class="col-md-9 w3_agileits-adopt-right">
			<h3 class="w3stitle">如果有能力，有意愿，欢迎收养宠物</h3> 
			<p>救助一只小生命，让它成为你亲密的家人~</p>
			<img src="images/puppy.png" class="img-responsive" alt=""/>
		</div>
		<div class="clearfix"></div>
	</div>	
	<div class="w3ls-section gallery" id="gallery">	 
		<div class="container">
			<h3 class="agileits-title">萌宠图片</h3>
			<div class="gallery-info">	
				<div class="col-sm-6 gallery-grids glry-grid1">
					<div class="gallery-grids-top">
						<a class="b-link-stripe b-animate-go" href="images/g10.jpg" data-lightbox="example-set" data-title="可爱狗狗">
							<img src="images/g10.jpg" class="img-responsive" alt=""/>
							<div class="b-wrapper">
								<span class="b-animate b-from-left"> 
									<i class="fa fa-arrows-alt" aria-hidden="true"></i>
								</span>					
							</div>
						</a>
					</div>
				</div>
			<div class="col-sm-6  glry-grid2">
					<div class="col-sm-6 col-xs-6 gallery-grids gr1">
						<a class="b-link-stripe b-animate-go" href="images/g7.jpg" data-lightbox="example-set" data-title="可爱鹦鹉 ">
							<img src="images/g7.jpg" class="img-responsive" alt=""/>
							<div class="b-wrapper">
								<span class="b-animate b-from-left">
									<i class="fa fa-arrows-alt" aria-hidden="true"></i>
								</span>					
							</div>
						</a>
					</div>
					<div class="col-sm-6 col-xs-6 gallery-grids gr3">
						<a class="b-link-stripe b-animate-go" href="images/g4.jpg" data-lightbox="example-set" data-title="可爱猫猫">
							<img src="images/g4.jpg" class="img-responsive" alt=""/>
							<div class="b-wrapper">
								<span class="b-animate b-from-left">
									<i class="fa fa-arrows-alt" aria-hidden="true"></i>
								</span>					
							</div>
						</a>
					</div>	
					<div class="col-sm-6 col-xs-6 gallery-grids ">
						<a class="b-link-stripe b-animate-go" href="images/2.jpg" data-lightbox="example-set" data-title="可爱狗狗">
							<img src="images/2.jpg" class="img-responsive" alt=""/>
							<div class="b-wrapper">
								<span class="b-animate b-from-left">
									<i class="fa fa-arrows-alt" aria-hidden="true"></i>
								</span>					
							</div>
						</a>
					</div>
					<div class="col-sm-6 col-xs-6 gallery-grids gr3">
						<a class="b-link-stripe b-animate-go" href="images/g8.jpg" data-lightbox="example-set" data-title="可爱鱼鱼">
							<img src="images/g8.jpg" class="img-responsive" alt=""/>
							<div class="b-wrapper">
								<span class="b-animate b-from-left">
									<i class="fa fa-arrows-alt" aria-hidden="true"></i>
								</span>					
							</div>
						</a>
					</div>	
				<div class="clearfix"></div>
				<div class="gallery-grid-3">
					<div class="col-sm-4 col-xs-4 gallery-grids">
						<a class="b-link-stripe b-animate-go" href="images/s6.jpg" data-lightbox="example-set" data-title="可爱猫猫">
							<img src="images/s6.jpg" class="img-responsive" alt=""/>
							<div class="b-wrapper">
								<span class="b-animate b-from-left">
									<i class="fa fa-arrows-alt" aria-hidden="true"></i>
								</span>					
							</div>
						</a>
					</div>
					<div class="col-sm-4 col-xs-4 gallery-grids">
						<a class="b-link-stripe b-animate-go" href="images/g7.jpg" data-lightbox="example-set" data-title="可爱鹦鹉">
							<img src="images/g7.jpg" class="img-responsive" alt=""/>
							<div class="b-wrapper">
								<span class="b-animate b-from-left">
									<i class="fa fa-arrows-alt" aria-hidden="true"></i>
								</span>					
							</div>
						</a>
					</div>
					<div class="col-sm-4 col-xs-4 gallery-grids">
						<a class="b-link-stripe b-animate-go" href="images/g4.jpg" data-lightbox="example-set" data-title="可爱猫猫">
							<img src="images/g4.jpg" class="img-responsive" alt=""/>
							<div class="b-wrapper">
								<span class="b-animate b-from-left">
									<i class="fa fa-arrows-alt" aria-hidden="true"></i>
								</span>					
							</div>
						</a>
					</div>
					<div class="clearfix"></div>	
				</div>
				<div class="clearfix"></div>
			</div>
				
				
			</div>	
		</div>	
				
	</div>
	<script src="js/lightbox-plus-jquery.min.js"> </script>

	<div class="agileits-section w3ls-section text-center">
		<div class="container">
			<h3 class="h3-w3l">金钱可以给你买一条好狗，但只有爱才能让它摇尾巴。</h3>
		</div>
	</div>	
	<div id="services" class="w3ls-section wthree-blog">
		<div class="container">  
				<h3 class="agileits-title">宠物服务</h3>     
			<div class="blog-agileinfo">
				<div class="col-md-3 blog-w3grid-img">
						<img src="images/s5.jpg" class="img-responsive" alt=""/>
				</div>
				<div class="col-md-9 blog-w3grid-text"> 
					<h4>给予暖心的建议</h4>
					<p>通过咨询我们会给予您关于宠物的相关建议和帮助~</p>
				</div> 
				<div class="clearfix"> </div>
			</div> 
			<div class="blog-agileinfo blog-agileinfo-mdl">
				<div class="col-md-5 blog-w3grid-img blog-img-rght">
						<img src="images/s3.jpg" class="img-responsive" alt=""/>
				</div>
				<div class="col-md-7 blog-w3grid-text"> 
					<h4>宠物医疗</h4>
					<p>建议您定期带宠物去宠物店进行除螨和洗浴（有时间有精力也可自行完成）</p>
				</div> 
				<div class="clearfix"> </div>
			</div> 
			<div class="blog-agileinfo">
				<div class="col-md-5 blog-w3grid-img">
						<img src="images/s4.jpg" class="img-responsive" alt=""/>
				</div>
				<div class="col-md-7 blog-w3grid-text"> 
					<h4>食物选择</h4>
					<p>请给予您的宠物相对正确，健康的食物，不要过分溺爱</p>
				</div> 
				<div class="clearfix"> </div>
			</div> 
	<div id="contact" class="wthree-contact w3ls-section">
		<div class="container">
			<h3 class="agileits-title">联系方式</h3>  
				<div class="col-md-6 col-sm-6 agileinfo-contact-left">	
					<h6>注册</h6>
					<form action="#" class="form_w3layouts" method="post">
						<div class="agileits-form-element">
							<span class="col-md-3  col-sm-3 col-xs-3 label1">姓名</span>
							<input type="text" class="col-md-9 col-sm-9 col-xs-9" name="name" required="">
							<div class="clearfix"></div>
						</div>
						<div class="agileits-form-element">
							<span class="col-md-3 col-sm-3 col-xs-3 label1">电话号</span>
							<input type="email" name="name" class="col-md-9 col-sm-9 col-xs-9 email" required="">
							<div class="clearfix"></div>
						</div>
						<div class="agileits-form-element">
							<span class="col-md-3 col-sm-3 col-xs-3  label1">信息</span>
							<textarea class="col-md-9 col-sm-9 col-xs-9" required></textarea>
							<div class="clearfix"></div>
						</div>
						<input type="submit" value="send">
					</form>	
				</div>
				<footer style="font-size:xx-large;"><a href="2.html">实验报告</a></footer>
				<p style="color:chocolate;">由于实验报告有时候出现乱码，怕出意外所以只好放在此处，请见谅</p>
					<p style="color:chocolate;">人员信息<hr></p>
					<p style="color:chocolate;">小组成员：刘杰，涂济韵<hr></p>
					<p style="color:chocolate;">学号：0223226，0223365</p><hr>
					<p style="color:chocolate;">班级：10班</p><hr>
					<p style="color:chocolate;">网站介绍</p><hr>
					<p style="color:chocolate;">名称：宠物之家</p><hr>
					<p style="color:chocolate;">主题：宠物</p><hr>
					<p style="color:chocolate;">选题目的：宣传了解宠物，喜爱宠物<hr></p>
					<p style="color:chocolate;">网站设计<hr></p>
					<p style="color:chocolate;">展示宠物以及呼吁对于收养宠物的支持<hr></p>

</body>
</html>